<template>
  <div :class="[
    'el-color-picker',
    colorDisabled ? 'is-disabled' : '',
    colorSize ? `el-color-picker--${colorSize}` : ''
  ]" v-clickoutside="hide" @click="handleTrigger">
    <slot>
      <div class="el-color-picker__mask" v-if="colorDisabled"></div>
      <div class="el-color-picker__trigger">
        <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
          <span class="el-color-picker__color-inner" :style="{
            backgroundColor: displayedColor
          }"></span>
          <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
        </span>
        <span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
      </div>
    </slot>
    <picker-dropdown ref="dropdown" :class="['el-color-picker__panel', popperClass || '']" v-model="showPicker"
      @pick="confirmValue" @clear="clearValue" :color="color" :show-alpha="showAlpha" :predefine="predefine">
    </picker-dropdown>
  </div>
</template>

<script>
import { ColorPicker } from "element-ui";


export default {
  extends: ColorPicker,
}
</script>